<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情页</title>

  <!-- 设备大于1200时 -->
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/goods/goods1200.css" />
  <!-- 设备960-1199时 -->
    <link rel="stylesheet" type="text/css" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/goods/goods1080.css" />
  <!-- 设备960-1199时 -->
    <link rel="stylesheet" type="text/css" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/goods/goods960.css" />
  <!-- 设备768-959时 -->
    <link rel="stylesheet" type="text/css" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/goods/goods768.css" />
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
</head>

<style>
.pages a,.pages span {
    display:inline-block;
    padding:4px 7px;
    margin:0 2px;
    border:1px solid #D5D4D4;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
}
.pages a,.pages li {
    display:inline-block;
    list-style: none;
    text-decoration:none; color:#077ee3;
}
.pages a:hover{
    border-color:#077ee3;
}
.pages span.current{
    background:#077ee3;
    color:#FFF;
    font-weight:700;
    border-color:#077ee3;
}
.long-tr th{
    text-align: center
}
.long-td td{
    text-align: center
}
</style>

<body>
    <div class="header">
        <div>
            <div class="logo">
                <a href="{:url('Index/index')}">
                    <img src="__STATIC__/index/img/logo.png" alt="">
                </a>
            </div>
            <div class="address">
                <img src="__STATIC__/index/img/xia.png" alt=""> <a href="{:url('Changestore/index')}">{if condition="!empty($cur_city)"}{$cur_city}{else /}选择城市{/if}</a>
            </div>
        </div>
        <div>
            {foreach name="category" item="v"}
            <div class="beijing">
                <div class="biaoti">
                    <div>
                        <a href="{:url('GoodsList/goods_list')}?cate_id={$v.id}">
                            <img src="{$v.logo}" alt="">
                        </a>
                    </div>
                    <div>
                        <a href="{:url('GoodsList/goods_list')}?cate_id={$v.id}">{$v.title}</a>
                    </div>
                </div>
            </div>
            {/foreach}

          <!-- 登录注册 -->
            <div class="DengLu">
                <div>
                    <img src="__STATIC__/index/img/gourmet.png" alt="">
                </div>
                <div>
                    {if condition="empty($realname)"}
                    <a href="{:url('Login/loginin')}?url={$url}">登录</a>
                    {else /}
                    <a href="{:url('User/index')}">{$realname}</a>
                    {/if}
                    /
                    <a href="{:url('Login/register')}">注册</a>
                    /
                    <a href="{:url('Login/logout')}">退出</a>
                </div>
            </div>
            <div class="caidan">
                <img src="__STATIC__/index/img/caidan.png" alt="">
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="Content">
        <div class="column">
            <div>
                <span>
                    <a href="{:url('Index/index')}">HOME</a>
                </span> /
                <span>
                    <a href="{:url('GoodsList/goods_list')}?cate_id={$category.0.id}">分类</a>
                </span> /
                <span>
                    <a href="javascript:;">详情</a>
                </span>
            </div>
            <div>
                <input type="text" placeholder="点击搜索艺术美食 ">
            </div>
        </div>
        <form action="{:url('GoodsList/pre_create_order')}" method="post" onsubmit="return checkform();">
            <div class="join">
            <div>
                <img src="{$goods.logo}" alt="">
            </div>
            <div>
                <div>
                    <div>购买 {$goods.name}</div>
                    <div>
                        {$goods.subtitle}
                    </div>
                </div>
                <p>{$goods.description}</p>
                <p>产品口味</p>
                <div>
                    <div>{$goods.taste}</div>
                </div>

                {volist name="spec_name" id="v" key="kk"}
                <p id="spec_{$kk}">{$v.name}</p>
                <div>
                    {foreach name="spec_result" item="v1" }
                    {if condition="$v1.spec_id eq $v.id"}
                    <div>
                        <input type="radio" name="spec_{$kk}"  value="{$v1.id}"  onclick="get_price();">{$v1.detail}
                    </div>
                    {/if}
                    {/foreach}
                </div>
                {/volist}

                <p>{$goods.eat_num}</p>
                <p>选择数量</p>
                <div>
                    <div>
                        <input type="radio" name="s_num" value="1" checked>1
                        <input type="radio" name="s_num" value="2">2
                        <input type="radio" name="s_num" value="3">3
                        <input type="radio" name="s_num" value="4">4
                        <input type="radio" name="s_num" value="5">5
                    </div>
                    <div>
                        <div>自填数量</div>
                        <div>
                            <input type="text" placeholder="10" name="num" value="">
                        </div>
                    </div>
                </div>

                <div>
                    <div id="price">￥
                        {if condition="($goods.member_level_id gt 1) AND ($member.level_id egt $goods.member_level_id)"}
                            {$goods.member_price}
                        {else /}
                            {$goods.price}
                        {/if}
                    </div>
                    <div id="stock">库存：{$goods.stock}</div>
                </div>
                <div>
                    <input type="submit" value="立即购买"></input>
                    {if condition="empty($store_goods_id)"}
                    <input type="button" onclick="addto_cart(1);" value="加入购物车">
                    {else /}
                    <input type="button" onclick="addto_cart(2);" value="加入购物车">
                    {/if}
                </div>
            </div>
        </div>
            <input type="hidden" name="spec_count" value="{$spec_count}">
            <input type="hidden" name="goods_id" value="{$goods.id}">
            {if condition="empty($store_goods_id)"}
            <input type="text" name="id[]" value="">
            {else /}
            <input type="text" name="id[]" value="{$store_goods_id}">
            {/if}
        </form>
      <!-- 公告 -->
        <div class="notice">
            {$goods.save_method}
            <span>最早明天10:00配送</span>
        </div>
      <!-- 公告结束 -->
      <!-- 详情和评论切换 -->
        <div class="total">
            <div>
                <p>
                    <span class="xiangqing qiehuan">产品详情</span>
                    <span class="pingLun">评论({$all_comment})</span>
                </p>
            </div>
          <!-- 详情和评论切换结束 -->
        </div>
      <!-- 详情 -->
        <div class="details">
            <div>
                {$goods.detail}
            </div>
        </div>
      <!-- 详情 -->
      <!-- 评论 -->
        <div class="comment">
            <div>
                {foreach name="pinglun" item="v"}
                <div>
                    <div>
                        <div>
                            <img src="{$v.logo}" alt="">
                        </div>
                        <p>{$v.mobile}</p>
                    </div>
                    <div>
                        <p>{$v.content}</p>
                        <div>
                            {if condition="!empty($v.images)"}
                            {foreach name="v.images" item="vo"}
                                <div>
                                    <img src="{$vo}" alt="">
                                </div>
                            {/foreach}
                            {/if}
                        </div>
                    </div>
                    <div>
                        <p>{$v.addtime|date="Y-m-d",###}</p>
                        <p>
                            <span>{$goods.name}</span>
                            <span>{$v.spec_title}</span>
                        </p>
                    </div>
                </div>
                {/foreach}
            </div>
            <!-- 翻页 -->
            <div class="pages" style=" text-align: center;">
                {$page}
            </div>
        </div>
      <!-- 评论 -->

    </div>

    <div class="footer">
        <div class="footer-content">
            <div class="footer-left">
                <div>
                    <img src="./img/foot-logo.png" alt="">
                </div>
                <p>A GENTLE DELICACY</p>
                <p>THAT CONVEYS</p>
                <p>LOVE AND AFFECTION</p>
            </div>
            <div class="footer-right">
                <div>
                    <div>
                        <img src="__STATIC__/index/img/weibo.png" alt="">
                    </div>
                    <div>新浪微博</div>
                    <div>
                        <img src="__STATIC__/index/img/weixin.png" alt="">
                    </div>
                    <div>公众平台</div>
                </div>
                <p>
                    <img src="__STATIC__/index/img/dianhua.png" alt="">
                    <span>{:sysconf('site_phone')}</span>
                    <span>（服务时间8：00-22：00）</span>
                </p>
                <div>
                    <div><a href="{:url('Article/index')}?cate_id=1">联系我们</a></div>
                    <div></div>
                    <div><a href="{:url('Article/index')}?cate_id=2">招兵买马</a></div>
                    <div></div>
                    <div><a href="{:url('Article/index')}?cate_id=3">企业合作</a></div>
                    <div></div>
                    <div><a href="{:url('Article/index')}?cate_id=4">产品导航</a></div>
                    <div></div>
                    <div><a href="{:url('Article/index')}?cate_id=5">企业文化</a></div>
                </div>
                <p>官网商城 2007-2017，版权所有 京ICP备888888888号-1</p>
            </div>
        </div>
    </div>




    <script src="__STATIC__/index/js/goods/goods.js"></script>
    <script>
        /**
         *  获取价格
         * @returns {boolean}
         */
        function get_price(){
            var spec_num = "{$spec_count}";
            var goods_id = $('input[name=goods_id]').val();
            //商品属性组合
            var spec_combin = '';
            for(var i=1;i<=spec_num;i++){
                if($('input[name=spec_'+i+']:checked').val() == null){
                    return false;
                }
                if($('input[name=spec_'+i+']:checked').val() != null){
                    spec_combin += $('input[name=spec_'+i+']:checked').val()+',';
                }
            }

            $.post("{:url('GoodsList/pre_calculate_price')}",
                {goods_id:goods_id,specs:spec_combin},
                function(data){
                    if(data.code == 1){
                        $('input[name="id[]"]').val(data.data.id);
                        $('#price').text('￥ '+data.data.price);
                        $('#stock').text('库存：'+data.data.stock);
                    }else{
                        $('input:radio[name^="spec_"]').removeAttr('checked');
                        alert(data.msg);
                    }
                }
            );
        }

        /**
         *  添加到购物车
         *  sign  1添加有属性的商品  2添加没有属性的商品
         */
        function addto_cart(sign){
            //商品属性数量
            var id = $('input[name="id[]"]').val();
            var spec_num = "{$spec_count}";
            var spec_combin = '';
            var s_num = $('input[name=s_num]:checked').val();
            var num = $('input[name=num]').val();
            //商品id
            var goods_id = $('input[name=goods_id]').val();
            for(var i=1;i<=spec_num;i++){
                if($('input[name=spec_'+i+']:checked').val() == null){
                    var spec_name = $('#spec_'+i).text();
                    alert('请选择'+spec_name);
                    return false;
                }
                if($('input[name=spec_'+i+']:checked').val() != null){
                    spec_combin += $('input[name=spec_'+i+']:checked').val()+',';
                }
            }
            $.post("{:url('GoodsList/addto_cart')}",
                {id:id,goods_id:goods_id,specs:spec_combin,s_num:s_num,num:num,sign:sign},
                function(data){
                    if(data.code == 1){
                        alert('添加购物车成功');
                    }else{
                        alert(data.msg);
                    }
                }
            );
        }

        /**
         *  立即购买
         * @returns {boolean}
         */
        function checkform(){
            //store_goods_stock  =>  主键id
//      var id = $('input[name="id[]"]').val();
            var goods_id = $('input[name=goods_id]').val();     //商品id
            var spec_num = "{$spec_count}";     //商品属性数量
            var spec_combin = '';

            for(var i=1;i<=spec_num;i++){
                if($('input[name=spec_'+i+']:checked').val() == null){
                    var spec_name = $('#spec_'+i).text();
                    alert('请选择'+spec_name);
                    return false;
                }
                if($('input[name=spec_'+i+']:checked').val() != null){
                    spec_combin += $('input[name=spec_'+i+']:checked').val()+',';
                }
            }
            return true;
        }
    </script>
</body>
</html>